<template>
  <div>
    <el-table :data="activityViewList" style="width: 100%;" border
              :empty-text="loadingFlag === true ? '正在拼命加载中...':'暂无数据'">
      <el-table-column prop="activityLogo" label="封面" width="260">
        <template slot-scope="scope">
          <el-image style="width: 100%; height: 180px" :src="mediaHost + scope.row.activityLogo"
                    fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="activityName" label="课程名称" width="150"></el-table-column>
      <el-table-column prop="activityType" label="课程类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.activityType === 1">前端开发</span>
          <span v-else-if="scope.row.activityType === 2">后端开发</span>
          <span v-else-if="scope.row.activityType === 3">移动开发</span>
          <span v-else-if="scope.row.activityType === 4">前沿技术</span>
          <span v-else-if="scope.row.activityType === 5">运维技术</span>
          <span v-else-if="scope.row.activityType === 6">测试技术</span>
          <span v-else>其他技术</span>
        </template>
      </el-table-column>
      <el-table-column prop="activityDesc" label="课程描述" width="240"></el-table-column>
      <el-table-column prop="joinTimeStr" label="加入时间" width="150"></el-table-column>
      <el-table-column prop="activityContentNum" label="课件数量" width="80"></el-table-column>
      <el-table-column align="right">-->
        <template slot-scope="scope" label="操作">
          <el-button
            size="mini"
            @click="toActivityDetail(scope.$index, scope.row)">进入学习
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="canQuit(scope.$index, scope.row)">退出课程
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--请求标识-->
    <div v-if="loadingFlag=== true" style="text-align: center;font-size: larger;margin-top: 10px;">
      <i class="el-icon-loading"></i>
    </div>
    <div v-else-if="activityPage.hasMore === true"
         style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;" @click="loadingMore()">
      <span>--点击加载更多--</span>
    </div>
    <div v-else-if="activityViewList.length > 0"
         style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;">
      <span>--没有更多数据了--</span>
    </div>
    <!--退出提示框-->
    <el-dialog title="提示" :visible.sync="quitDialogVisible" width="20%">
      <span>确认退出此课程吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quitDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="quit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "MyAuth",
  data() {
    return {
      mediaHost: this.$global.mediaHost,
      activityViewList: [],
      activityPage: this.$global.indexPage,
      loadingFlag: false,
      paramsData: {
        page: this.activityPage,
        activitySearch: this.activitySearch
      },
      quitDialogVisible: false,
      quitActivityId: '',
    }
  },
  mounted() {
    addEventListener('scroll', this.handleScroll)//监听函数
  },
  methods: {
    handleScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollTop + windowHeight === scrollHeight) {
        //你想做的事情
        if (this.activityPage.hasMore === true && !this.loadingFlag) {
          this.activityPage.page += 1;
          this.getJoinActivityList();
        }
      }
    },
    loadingMore:function () {
      this.activityPage.page += 1;
      this.getJoinActivityList();
    },
    /**
     * 我的课程列表
     */
    getJoinActivityList: function () {
      this.loadingFlag= true
      this.paramsData.page = this.activityPage
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/activity/getJoinActivityList',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.loadingFlag = false;
          this.activityViewList = this.activityViewList.concat(responseData.pageData.data)
          this.activityPage = responseData.pageData.page
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     *
     * 判断是否确认删除课程
     * @param index
     * @param row
     */
    canQuit(index, row) {
      this.quitDialogVisible = true
      this.quitActivityId = row.activityId
    },
    /**
     * 退出课程
     */
    quit: function () {
      this.quitDialogVisible = false
      this.paramsData.activityId = this.quitActivityId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/auth/quit',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "退出课程成功",
            center: true,
            duration: 1000
          });
          this.deleteData()
          this.getJoinActivityList();
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    deleteData: function () {
      this.activityViewList = []
      this.activityPage = this.$global.indexPage
    },
    toActivityDetail: function (index, row) {
      this.$router.push({path: "/homePage/activityDetail", query: {activityId: row.activityId + "", pageName: "myAuth"}})
    },
  },
  created() {
    this.getJoinActivityList()
  }
}
</script>

<style scoped>

</style>
